<template>
    <div>
        <!-- EAA容器 -->
        <div class="eaa-container" :class="{ 'eaa-dark': isDarkMode }" style="isolation: isolate;">
            <!-- 控制面板 -->
            <div class="eaa-control-panel" :class="{ 'eaa-panel-visible': isVisible }" @keydown="handlePanelKeydown">
                <div class="eaa-panel-header">
                    <span class="eaa-title">EAA Control Panel</span>
                    <button 
                        ref="closeBtn"
                        class="eaa-close-btn" 
                        @click="closePanel"
                        tabindex="0"
                        :aria-label="'Close EAA Control Panel'"
                    >
                        <i class="el-icon-close"></i>
                    </button>
                </div>
                
                <div class="eaa-panel-content">
                    <!-- 缩放控制 -->
                    <div class="eaa-control-group">
                        <h4 class="eaa-group-title">Zoom Control</h4>
                        <div class="eaa-zoom-controls">
                            <button 
                                ref="zoomInBtn"
                                class="eaa-btn eaa-btn-zoom" 
                                @click="zoomIn"
                                :disabled="currentZoom >= maxZoom"
                                tabindex="0"
                                :aria-label="'Zoom In - Current zoom: ' + Math.round(currentZoom * 100) + '%'"
                            >
                                <i class="el-icon-zoom-in"></i>
                                Zoom In
                            </button>
                            <span class="eaa-zoom-level" tabindex="0" :aria-label="'Current zoom level: ' + Math.round(currentZoom * 100) + '%'">{{ Math.round(currentZoom * 100) }}%</span>
                            <button 
                                ref="zoomOutBtn"
                                class="eaa-btn eaa-btn-zoom" 
                                @click="zoomOut"
                                :disabled="currentZoom <= minZoom"
                                tabindex="0"
                                :aria-label="'Zoom Out - Current zoom: ' + Math.round(currentZoom * 100) + '%'"
                            >
                                <i class="el-icon-zoom-out"></i>
                                Zoom Out
                            </button>
                        </div>
                    </div>

                    <!-- 主题切换 -->
                    <div class="eaa-control-group">
                        <h4 class="eaa-group-title">Theme Control</h4>
                        <div class="eaa-theme-controls">
                            <button 
                                ref="themeBtn"
                                class="eaa-btn eaa-btn-theme" 
                                @click="toggleTheme"
                                :class="{ 'eaa-btn-active': !isDarkMode }"
                                tabindex="0"
                                :aria-label="'Switch to ' + (isDarkMode ? 'Light' : 'Dark') + ' Mode'"
                            >
                                <i :class="isDarkMode ? 'el-icon-sunny' : 'el-icon-moon'"></i>
                                {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
                            </button>
                        </div>
                    </div>

                    <!-- 重置和关闭按钮 -->
                    <div class="eaa-control-group">
                        <h4 class="eaa-group-title">Actions</h4>
                        <div class="eaa-reset-controls">
                            <button 
                                ref="resetBtn"
                                class="eaa-btn eaa-btn-reset" 
                                @click="resetAll"
                                tabindex="0"
                                aria-label="Reset all EAA settings to default"
                            >
                                <i class="el-icon-refresh"></i>
                                Reset All
                            </button>
                            <button 
                                ref="closePanelBtn"
                                class="eaa-btn eaa-btn-close" 
                                @click="closePanel"
                                tabindex="0"
                                aria-label="Close EAA Control Panel"
                            >
                                <i class="el-icon-close"></i>
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 固定位置的触发按钮 -->
        <button 
            ref="triggerBtn"
            class="eaa-trigger-btn" 
            @click="togglePanel"
            :class="{ 'eaa-trigger-active': isVisible }"
            tabindex="0"
            :aria-label="isVisible ? 'Close EAA Control Panel' : 'Open EAA Control Panel'"
        >
            <i class="el-icon-setting"></i>
        </button>
    </div>
</template>

<script>
export default {
    name: 'EAA',
    data() {
        return {
            isVisible: false,
            isDarkMode: false,
            currentZoom: 1,
            minZoom: 0.5,
            maxZoom: 2,
            originalZoom: 1,
            // 按钮相关
            buttonSize: 50,
            // 键盘导航相关
            currentFocusIndex: -1,
            focusableElements: []
        };
    },
    mounted() {
        // 从localStorage恢复设置
        this.loadSettings();
        // 应用初始设置
        this.applySettings();
        // 监听键盘快捷键
        this.addKeyboardListeners();
    },
    beforeDestroy() {
        this.removeKeyboardListeners();
        // 清理所有EAA相关的样式，确保不影响原有功能
        this.cleanup();
    },
    methods: {
        // 切换控制面板显示
        togglePanel() {
            this.isVisible = !this.isVisible;
            if (this.isVisible) {
                // 面板打开时，聚焦第一个元素
                this.focusFirstElement();
            }
        },

        // 关闭控制面板
        closePanel() {
            this.isVisible = false;
        },

        // 放大
        zoomIn() {
            if (this.currentZoom < this.maxZoom) {
                this.currentZoom = Math.min(this.currentZoom + 0.1, this.maxZoom);
                this.applyZoom();
                this.saveSettings();
            }
        },

        // 缩小
        zoomOut() {
            if (this.currentZoom > this.minZoom) {
                this.currentZoom = Math.max(this.currentZoom - 0.1, this.minZoom);
                this.applyZoom();
                this.saveSettings();
            }
        },

        // 切换主题
        toggleTheme() {
            this.isDarkMode = !this.isDarkMode;
            this.applyTheme();
            this.saveSettings();
            // 触发全局主题切换
            this.triggerGlobalThemeToggle();
        },

        // 重置所有设置
        resetAll() {
            this.currentZoom = this.originalZoom;
            this.isDarkMode = false;
            this.resetZoom();
            this.applyTheme(); // 先应用主题
            this.applySettings();
            this.saveSettings();
            // 触发全局主题切换
            this.triggerGlobalThemeToggle();
            this.$message.success('All settings have been reset');
        },

        // 重置缩放
        resetZoom() {
            // 清除zoom属性
            document.body.style.zoom = '';
            
            // 清除所有可能的缩放样式
            const elements = document.querySelectorAll('#app .el-main, #app .main-content, #app .content, #app .router-view, #app > div:not(.eaa-container)');
            elements.forEach(el => {
                el.style.transform = '';
                el.style.transformOrigin = '';
                el.style.transition = '';
                el.style.width = '';
                el.style.minHeight = '';
                el.style.overflow = '';
            });
            
            const app = document.querySelector('#app');
            if (app) {
                app.style.transform = '';
                app.style.transformOrigin = '';
                app.style.transition = '';
                app.style.width = '';
                app.style.minHeight = '';
                app.style.overflow = '';
            }
            
            // 重置父容器样式
            const parentContainers = document.querySelectorAll('#app .el-main, #app .main-content, #app .content, #app .router-view');
            parentContainers.forEach(container => {
                const parent = container.parentElement;
                if (parent) {
                    parent.style.overflow = '';
                    parent.style.width = '';
                    parent.style.height = '';
                }
            });
            
            // 重置body样式
            document.body.style.overflow = '';
            document.body.style.width = '';
            document.body.style.height = '';
        },

        // 应用缩放 - 改进版本，确保放大后可以查看所有内容
        applyZoom() {
            // 使用CSS zoom属性作为主要方案，更简单且兼容性更好
            const body = document.body;
            
            // 清除之前的transform样式
            this.resetZoom();
            
            // 使用zoom属性进行缩放
            body.style.zoom = this.currentZoom;
            
            // 确保页面可以正常滚动
            body.style.overflow = 'auto';
            body.style.width = '100%';
            body.style.height = '100%';
            
            // 确保按钮与控制面板保持一致
            this.ensureButtonConsistency();
            
            // 如果浏览器不支持zoom，则使用transform作为备选方案
            if (body.style.zoom === undefined || body.style.zoom === '') {
                console.log('Browser does not support zoom, using transform fallback');
                this.applyZoomTransform();
            }
        },

        // 备选方案：使用transform进行缩放
        applyZoomTransform() {
            // 查找主要内容区域
            const mainContent = document.querySelector('#app .el-main') || 
                               document.querySelector('#app .main-content') ||
                               document.querySelector('#app .content') ||
                               document.querySelector('#app .router-view') ||
                               document.querySelector('#app > div:not(.eaa-container)');
            
            if (mainContent) {
                // 应用缩放变换
                mainContent.style.transform = `scale(${this.currentZoom})`;
                mainContent.style.transformOrigin = 'top left';
                mainContent.style.transition = 'transform 0.3s ease';
                
                // 调整容器尺寸以适应缩放
                const scaledWidth = 100 / this.currentZoom;
                const scaledHeight = 100 / this.currentZoom;
                
                mainContent.style.width = `${scaledWidth}%`;
                mainContent.style.minHeight = `${scaledHeight}vh`;
                mainContent.style.overflow = 'visible';
                
                // 确保父容器可以滚动
                const parentContainer = mainContent.parentElement;
                if (parentContainer) {
                    parentContainer.style.overflow = 'auto';
                    parentContainer.style.width = '100%';
                    parentContainer.style.height = '100vh';
                }
                
            } else {
                // 如果找不到主要内容区域，则影响整个app容器
                const app = document.querySelector('#app');
                if (app) {
                    app.style.transform = `scale(${this.currentZoom})`;
                    app.style.transformOrigin = 'top left';
                    app.style.transition = 'transform 0.3s ease';
                    
                    // 调整app容器尺寸
                    const scaledWidth = 100 / this.currentZoom;
                    const scaledHeight = 100 / this.currentZoom;
                    
                    app.style.width = `${scaledWidth}%`;
                    app.style.minHeight = `${scaledHeight}vh`;
                    app.style.overflow = 'visible';
                }
            }
        },

        // 应用主题 - 更安全的主题切换，避免影响关键功能
        applyTheme() {
            const body = document.body;
            const html = document.documentElement;
            
            if (this.isDarkMode) {
                body.classList.add('eaa-dark-theme');
                body.classList.add('theme-dark');
                html.classList.add('theme-dark');
                // 确保EAA组件本身在暗模式下正常工作
                this.$el.classList.add('eaa-dark');
            } else {
                body.classList.remove('eaa-dark-theme');
                body.classList.remove('theme-dark');
                html.classList.remove('theme-dark');
                this.$el.classList.remove('eaa-dark');
            }
            
            // 强制触发重绘，确保样式正确应用
            this.$nextTick(() => {
                body.style.display = 'none';
                body.offsetHeight; // 触发重排
                body.style.display = '';
            });
        },

        // 应用所有设置
        applySettings() {
            this.applyZoom();
            this.applyTheme();
        },

        // 触发全局主题切换
        triggerGlobalThemeToggle() {
            // 通过事件总线通知其他组件主题已切换
            this.$emit('theme-changed', this.isDarkMode);
            
            // 也可以通过全局事件总线通知
            if (this.$root.$options.eventBus) {
                this.$root.$options.eventBus.$emit('theme-changed', this.isDarkMode);
            }
            
            // 显示切换成功消息
            this.$message.success(this.isDarkMode ? '已切换到暗模式' : '已切换到亮模式');
        },

        // 保存设置到localStorage
        saveSettings() {
            const settings = {
                isDarkMode: this.isDarkMode,
                currentZoom: this.currentZoom
            };
            localStorage.setItem('eaa-settings', JSON.stringify(settings));
        },

        // 从localStorage加载设置
        loadSettings() {
            const saved = localStorage.getItem('eaa-settings');
            if (saved) {
                try {
                    const settings = JSON.parse(saved);
                    this.isDarkMode = settings.isDarkMode || false;
                    this.currentZoom = settings.currentZoom || 1;
                } catch (e) {
                    console.warn('Failed to load EAA settings:', e);
                }
            }
        },

        // 添加键盘快捷键监听
        addKeyboardListeners() {
            document.addEventListener('keydown', this.handleKeydown);
        },

        // 移除键盘快捷键监听
        removeKeyboardListeners() {
            document.removeEventListener('keydown', this.handleKeydown);
        },

        // 处理键盘事件
        handleKeydown(event) {
            // Ctrl + Shift + E 切换面板
            if (event.ctrlKey && event.shiftKey && event.key === 'E') {
                event.preventDefault();
                this.togglePanel();
            }
            // Ctrl + = 放大
            else if (event.ctrlKey && event.key === '=') {
                event.preventDefault();
                this.zoomIn();
            }
            // Ctrl + - 缩小
            else if (event.ctrlKey && event.key === '-') {
                event.preventDefault();
                this.zoomOut();
            }
            // Ctrl + 0 重置缩放
            else if (event.ctrlKey && event.key === '0') {
                event.preventDefault();
                this.currentZoom = this.originalZoom;
                this.applyZoom();
                this.saveSettings();
            }
            // Ctrl + Shift + D 切换主题
            else if (event.ctrlKey && event.shiftKey && event.key === 'D') {
                event.preventDefault();
                this.toggleTheme();
            }
        },

        // 处理控制面板内的键盘事件
        handlePanelKeydown(event) {
            // 如果面板不可见，不处理键盘事件
            if (!this.isVisible) return;

            // Tab键导航
            if (event.key === 'Tab') {
                event.preventDefault();
                this.handleTabNavigation(event.shiftKey);
            }
            // 回车键激活
            else if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this.activateFocusedElement();
            }
            // ESC键关闭面板
            else if (event.key === 'Escape') {
                event.preventDefault();
                this.closePanel();
            }
        },

        // 处理Tab键导航
        handleTabNavigation(isShiftTab) {
            this.updateFocusableElements();
            
            if (this.focusableElements.length === 0) return;

            if (isShiftTab) {
                // Shift + Tab: 向前导航
                this.currentFocusIndex = this.currentFocusIndex <= 0 
                    ? this.focusableElements.length - 1 
                    : this.currentFocusIndex - 1;
            } else {
                // Tab: 向后导航
                this.currentFocusIndex = this.currentFocusIndex >= this.focusableElements.length - 1 
                    ? 0 
                    : this.currentFocusIndex + 1;
            }

            this.focusCurrentElement();
        },

        // 更新可聚焦元素列表
        updateFocusableElements() {
            this.focusableElements = [
                this.$refs.triggerBtn,
                this.$refs.closeBtn,
                this.$refs.zoomInBtn,
                this.$refs.zoomOutBtn,
                this.$refs.themeBtn,
                this.$refs.resetBtn,
                this.$refs.closePanelBtn
            ].filter(el => el && !el.disabled);
        },

        // 聚焦当前元素
        focusCurrentElement() {
            if (this.focusableElements[this.currentFocusIndex]) {
                this.focusableElements[this.currentFocusIndex].focus();
            }
        },

        // 激活当前聚焦的元素
        activateFocusedElement() {
            const focusedElement = this.focusableElements[this.currentFocusIndex];
            if (focusedElement) {
                // 触发点击事件
                focusedElement.click();
            }
        },

        // 当面板打开时，聚焦第一个元素
        focusFirstElement() {
            this.$nextTick(() => {
                this.updateFocusableElements();
                if (this.focusableElements.length > 0) {
                    this.currentFocusIndex = 0;
                    this.focusCurrentElement();
                }
            });
        },

        // 清理方法 - 确保不影响原有功能
        cleanup() {
            // 重置缩放
            this.resetZoom();
            
            // 移除暗模式
            const body = document.body;
            body.classList.remove('eaa-dark-theme');
            
            // 清除localStorage中的EAA设置（可选）
            // localStorage.removeItem('eaa-settings');
        },

    }
};
</script>

<style lang="less" scoped>
// 重置可能干扰的样式
.eaa-container * {
    box-sizing: border-box !important;
}

// 完全隔离EAA组件，避免外部样式干扰
.eaa-container {
    isolation: isolate !important;
    contain: layout style paint !important;
}

// 确保EAA组件不受外部样式影响
.eaa-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    &.eaa-dark {
        .eaa-control-panel {
            background: @dark-bg-secondary !important;
            border: 1px solid @dark-border !important;
            color: @dark-text-primary !important;
            
            .eaa-panel-header {
                background: @dark-bg-tertiary !important;
                border-bottom: 1px solid @dark-border !important;
                
                .eaa-title {
                    color: @dark-text-primary !important;
                }
                
                .eaa-close-btn {
                    color: @dark-text-secondary !important;
                    
                    &:hover {
                        background: @dark-border !important;
                        color: @dark-text-primary !important;
                    }
                }
            }
            
            .eaa-panel-content {
                background: @dark-bg-secondary !important;
            }
            
            .eaa-group-title {
                color: @dark-text-primary !important;
                border-bottom-color: @dark-border !important;
            }
            
            .eaa-btn {
                background: @dark-bg-tertiary !important;
                border-color: @dark-border !important;
                color: @dark-text-primary !important;
                
                &:hover:not(:disabled) {
                    background: @dark-border !important;
                    border-color: @dark-border-light !important;
                }
                
                &.eaa-btn-active {
                    background: @blueColor !important;
                    border-color: @blueColor !important;
                    color: #fff !important;
                }
                
                &.eaa-btn-close {
                    background: #f56c6c !important;
                    border-color: #f56c6c !important;
                    color: #fff !important;
                    
                    &:hover {
                        background: darken(#f56c6c, 10%) !important;
                        border-color: darken(#f56c6c, 10%) !important;
                    }
                }
            }
            
            .eaa-zoom-level {
                color: @blueColor !important;
            }
        }
    }
}

.eaa-control-panel {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 320px !important;
    background: @light-bg-primary !important;
    border: 1px solid @light-border !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px @light-shadow !important;
    pointer-events: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease, background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 10001 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    
    // 强制重置所有可能的干扰样式
    * {
        all: unset;
        display: revert;
        box-sizing: border-box;
    }
    
    // 确保没有伪元素干扰
    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }
    
    &.eaa-panel-visible {
        transform: translateX(0) !important;
    }
}

.eaa-panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    background: @light-bg-secondary !important;
    border-bottom: 1px solid @light-border !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background 0.3s ease, border 0.3s ease !important;
    
    .eaa-title {
        font-size: 16px !important;
        font-weight: bold !important;
        color: @light-text-primary !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: color 0.3s ease !important;
    }
    
    .eaa-close-btn {
        background: none !important;
        border: none !important;
        font-size: 18px !important;
        color: @light-text-secondary !important;
        cursor: pointer !important;
        padding: 5px !important;
        border-radius: 4px !important;
        transition: all 0.2s !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        
        &:hover {
            background: @light-bg-tertiary !important;
            color: @light-text-primary !important;
        }
        
        &:focus {
            outline: 2px solid @blueColor !important;
            outline-offset: 2px !important;
            background: @light-bg-tertiary !important;
            color: @light-text-primary !important;
        }
    }
}

.eaa-panel-content {
    padding: 20px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.eaa-control-group {
    margin-bottom: 25px;
    
    &:last-child {
        margin-bottom: 0;
    }
    
    .eaa-group-title {
        font-size: 14px;
        font-weight: bold;
        color: @light-text-primary;
        margin: 0 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid @light-border;
        transition: color 0.3s ease, border 0.3s ease;
    }
}

.eaa-zoom-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    
    .eaa-zoom-level {
        font-size: 14px;
        font-weight: bold;
        color: @blueColor;
        min-width: 50px;
        text-align: center;
        padding: 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
        
        &:focus {
            outline: 2px solid @blueColor;
            outline-offset: 2px;
            background: @light-bg-secondary;
        }
    }
}

.eaa-theme-controls,
.eaa-reset-controls {
    display: flex;
    gap: 10px;
}

.eaa-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid @light-border;
    border-radius: 6px;
    background: @light-bg-primary;
    color: @light-text-primary;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    justify-content: center;
    position: relative;
    z-index: 1;
    
    // 确保没有伪元素干扰
    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }
    
    &:hover:not(:disabled) {
        background: @light-bg-secondary;
        border-color: @blueColor;
        color: @blueColor;
    }
    
    &:focus {
        outline: 2px solid @blueColor;
        outline-offset: 2px;
        background: @light-bg-secondary;
        border-color: @blueColor;
        color: @blueColor;
    }
    
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    &.eaa-btn-active {
        background: @blueColor;
        border-color: @blueColor;
        color: #fff;
        
        &:hover {
            background: darken(@blueColor, 10%);
        }
    }
    
    // Close按钮特殊样式
    &.eaa-btn-close {
        background: #f56c6c;
        border-color: #f56c6c;
        color: #fff;
        
        &:hover {
            background: darken(#f56c6c, 10%);
            border-color: darken(#f56c6c, 10%);
        }
    }
    
    i {
        font-size: 16px;
        position: relative;
        z-index: 2;
    }
}

.eaa-trigger-btn {
    position: fixed !important;
    bottom: 80px !important; // 下方靠上一点的位置
    right: 20px !important; // 右侧边距
    width: 40px !important;
    height: 40px !important;
    background: @blueColor !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(26, 143, 227, 0.3) !important;
    pointer-events: auto !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    z-index: 9998 !important; // 确保在控制面板下方
    margin: 0 !important;
    padding: 0 !important;
    user-select: none !important;
    transform-origin: center center !important;
    
    &:hover {
        background: darken(@blueColor, 10%) !important;
        transform: scale(1.1) !important;
    }
    
    &:focus {
        outline: 2px solid @blueColor !important;
        outline-offset: 2px !important;
        background: darken(@blueColor, 10%) !important;
        transform: scale(1.1) !important;
    }
    
    &.eaa-trigger-active {
        background: #666 !important;
        transform: rotate(45deg) !important;
    }
    
}

// 暗模式下的按钮样式
:global(.eaa-dark-theme) {
    .eaa-trigger-btn {
        background: #2c2c2c !important;
        border: 1px solid #444 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        
        &:hover {
            background: #444 !important;
        }
        
        &.eaa-trigger-active {
            background: #666 !important;
        }
    }
}

// 全局暗模式样式 - 更精确的选择器，避免影响关键功能
:global(.theme-dark) {
    .eaa-control-panel {
        background: @dark-bg-secondary !important;
        border: 1px solid @dark-border !important;
        color: @dark-text-primary !important;
        
        .eaa-panel-header {
            background: @dark-bg-tertiary !important;
            border-bottom: 1px solid @dark-border !important;
            
            .eaa-title {
                color: @dark-text-primary !important;
            }
            
            .eaa-close-btn {
                color: @dark-text-secondary !important;
                
                &:hover {
                    background: @dark-border !important;
                    color: @dark-text-primary !important;
                }
            }
        }
        
        .eaa-panel-content {
            background: @dark-bg-secondary !important;
        }
        
        .eaa-group-title {
            color: @dark-text-primary !important;
            border-bottom-color: @dark-border !important;
        }
        
        .eaa-btn {
            background: @dark-bg-tertiary !important;
            border-color: @dark-border !important;
            color: @dark-text-primary !important;
            
            &:hover:not(:disabled) {
                background: @dark-border !important;
                border-color: @dark-border-light !important;
            }
            
            &.eaa-btn-active {
                background: @blueColor !important;
                border-color: @blueColor !important;
                color: #fff !important;
            }
            
            &.eaa-btn-close {
                background: #f56c6c !important;
                border-color: #f56c6c !important;
                color: #fff !important;
                
                &:hover {
                    background: darken(#f56c6c, 10%) !important;
                    border-color: darken(#f56c6c, 10%) !important;
                }
            }
        }
        
        .eaa-zoom-level {
            color: @blueColor !important;
        }
    }
}

:global(.eaa-dark-theme) {
    // 只影响主要内容区域，不影响导航和关键功能
    .el-main,
    .main-content,
    .content,
    .router-view {
        background: #1a1a1a !important;
        color: #fff !important;
    }
    
    // 卡片和对话框
    .el-card:not(.nav-card):not(.header-card),
    .el-dialog:not(.nav-dialog),
    .el-drawer:not(.nav-drawer),
    .el-popover:not(.nav-popover) {
        background: #2c2c2c !important;
        border-color: #444 !important;
        color: #fff !important;
    }
    
    // 表单元素
    .el-input__inner:not(.nav-input),
    .el-textarea__inner:not(.nav-textarea) {
        background: #333 !important;
        border-color: #555 !important;
        color: #fff !important;
    }
    
    // 按钮（排除导航按钮）
    .el-button--default:not(.nav-button):not(.header-button) {
        background: #333 !important;
        border-color: #555 !important;
        color: #fff !important;
    }
    
    // 表格（排除导航表格）
    .el-table:not(.nav-table) {
        background: #2c2c2c !important;
        color: #fff !important;
        
        th, td {
            background: #2c2c2c !important;
            border-color: #444 !important;
            color: #fff !important;
        }
    }
    
    // 菜单（排除主导航）
    .el-menu:not(.el-menu--horizontal):not(.main-nav) {
        background: #2c2c2c !important;
        
        .el-menu-item:not(.nav-item) {
            color: #fff !important;
            
            &:hover {
                background: #444 !important;
            }
        }
    }
    
    // 保护关键功能区域
    .header-nav,
    .main-nav,
    .navigation,
    .navbar,
    .el-header,
    .el-aside {
        // 保持原有样式，不受暗模式影响
        background: inherit !important;
        color: inherit !important;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .eaa-control-panel {
        width: 280px;
        top: 10px;
        right: 10px;
    }
    
    .eaa-trigger-btn {
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .eaa-btn {
        min-width: 80px;
        padding: 8px 12px;
        font-size: 12px;
    }
}
</style>
